/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/10/25 1:44 下午
 * @version V1.0
 */
import React, { useRef } from 'react';
import { Button, Card, Col, Form, Input, message, Row } from 'antd';
import { reqArticleAdd } from 'api/index';
import { history } from 'umi';
import RichText from 'components/RichText';

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const { Item } = Form;
const AddArticle = () => {
    const [form] = Form.useForm();
    const refRich = useRef();
    const submit = () => {
        const content = refRich.current.cbRichHtml();
        if (content === '<p></p>') {
            message.warn('请填写内容');
            return;
        }
        form.validateFields().then(async values => {
            values.content = content;
            const result = await reqArticleAdd(values);
            if (result.status === 1) {
                history.push('/system-manage/article/list');
            } else {
                message.error(result.message);
            }
        }).catch(info => {
        });
    };
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="题目"
                            name="title"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入分类名称"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="内容"
                        >
                            <RichText
                                template={''}
                                refRich={refRich}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );

};

export default AddArticle;
